<template>
	<div>
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="分公司">
        <el-select v-model="formInline.limit_branch_id" v-if="isBranch" style="width: 180px" filterable>
          <el-option
            v-for="item in branchList"
            :label="item.branch_Name"
            :value="item.branch_Id">
          </el-option>
        </el-select>
        <el-input v-else v-model="branchName" disabled></el-input>
      </el-form-item>
      <el-form-item label="审核状态" style="margin-right:30px">
        <el-select v-model="formInline.check_status" filterable clearable style="width:195px">
          <el-option label="草稿" value="1"></el-option>
          <el-option label="待审核" value="2"></el-option>
          <el-option label="审核中" value="3"></el-option>
          <el-option label="审核不通过" value="4"></el-option>
          <el-option label="未开始" value="5"></el-option>
          <el-option label="进行中" value="6"></el-option>
          <el-option label="已结束" value="7"></el-option>
          <el-option label="已作废" value="99"></el-option>
        </el-select>
      </el-form-item>
			<el-form-item label="活动时间">
				<el-date-picker v-model="huodongTime" type="daterange" value-format="yyyy-MM-dd" filterable clearable placeholder="请选择活动时间" @change="timeChange" style="margin-right:30px">
        </el-date-picker>
			</el-form-item>
			<el-form-item label="活动名称">
        <el-input v-model="formInline.promotion_name" placeholder="活动名称" style="width:150px"></el-input>
      </el-form-item>
      <el-form-item label="活动ID">
        <el-input v-model="formInline.promotion_id" placeholder="活动ID" style="width:150px"></el-input>
      </el-form-item>
      <el-form-item label="商品ID">
        <el-input v-model="formInline.product_id" placeholder="商品ID" style="width:150px"></el-input>
      </el-form-item>
			<el-form-item>
        <el-button type="primary"  @click="searchList">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="isLoading" :data="tableData" @select-all="handleSelectionChange"  @selection-change="handleChange" style="width: 100%" border>
      <el-table-column
        align="center"
        fixed
        type="selection"
        :selectable="isCheck"
        width="50">
      </el-table-column>
      <el-table-column prop="branchName" label="分公司" align="center" min-width="180"></el-table-column>
      <!--<el-table-column prop="departName" label="所属部门" align="center" width="140"></el-table-column>-->
      <el-table-column prop="limitStoreName" label="所属仓库" align="center" width="180"></el-table-column>
      <el-table-column prop="customerName" label="客资类型" align="center" min-width="120"></el-table-column>
      <el-table-column prop="id" label="活动ID" align="center" min-width="80"></el-table-column>
      <el-table-column prop="product_id" label="商品ID" align="center" min-width="90">
        <template scope="scope">
          <span>{{ scope.row.product_list.main_product[0].product_id }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品名称" align="center" min-width="180">
        <template scope="scope">
          <span>{{ scope.row.product_list.main_product[0].name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="saleunit" label="单位" align="center" min-width="90">
        <template scope="scope">
          <span>{{ scope.row.product_list.main_product[0].saleunit }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="salenorm" label="规格" align="center" min-width="100">
        <template scope="scope">
          <span>{{ scope.row.product_list.main_product[0].salenorm }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price_real" label="系统售价" align="center" min-width="100">
        <template scope="scope">
          <span>{{ scope.row.product_list.main_product[0].price_real/100 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="cgprice" label="最近一次采购价" align="center" min-width="120">
        <template scope="scope">
          <span>{{ scope.row.product_list.main_product[0].cgprice/100 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="oldml" label="原毛利" align="center" min-width="90">
        <template scope="scope">
          <span>{{ scope.row.product_list.main_product[0].oldml/100 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="discount" label="折扣率" align="center" min-width="90">
        <template scope="scope">
          <span>{{ scope.row.product_list.main_product[0].discount }}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="price_real" label="促销单价" align="center" min-width="100">
        <template scope="scope">
          <span>{{ scope.row.product_list.main_product[0].price_real/100 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="cxml" label="促销毛利" align="center" min-width="100">
        <template scope="scope">
          <span>{{ scope.row.product_list.main_product[0].cxml/100 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="cxmll" label="促销毛利率" align="center" min-width="110">
        <template scope="scope">
          <span>{{ scope.row.product_list.main_product[0].cxmll }}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="cxmls" label="毛利损失" align="center" min-width="100">
        <template scope="scope">
          <span>{{ scope.row.product_list.main_product[0].cxmls/100 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="start_time" label="活动开始时间" align="center" width="110"></el-table-column>
      <el-table-column prop="end_time" label="活动结束时间" align="center" width="110"></el-table-column>
      <el-table-column prop="updateUser" label="申请人" align="center" width="100"></el-table-column>
      <el-table-column prop="create_time" label="申请时间" align="center" width="110"></el-table-column>
      <el-table-column prop="updateTime" label="审核通过时间" align="center" width="110"></el-table-column>
      <el-table-column prop="state" label="活动状态" align="center" width="100"></el-table-column>
      <el-table-column label="操作" align="center" min-width="180" fixed="right">
        <template scope="scope">
          <el-button v-if="" @click="handle(scope.$index, scope.row, $event)" size="small">详情</el-button>
          <el-button v-if="(scope.row.state === '审核中' && scope.row.isCheck === 'true') || (scope.row.state === '待审核' && scope.row.isCheck === 'true')" @click="handle(scope.$index, scope.row, $event)" size="small">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="float: left; margin-top: 10px">
      <el-button type="primary" @click="lotCheck">批量审核</el-button>
    </div>
    <!--分页-->
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="Number(formInline.pageSize)"
      layout="total, prev, pager, next"
      :total="Number(total)"
      style="padding-top:10px;text-align: right;">
    </el-pagination>
    <!--审核弹窗-->
    <el-dialog
      title="审核信息"
      size="tiny"
      :visible.sync="dialogCheck">
      <p></p>
      <span>审核状态：</span>
      <template>
        <el-radio class="radio" v-model="radio" label="1">审核通过</el-radio>
        <el-radio class="radio" v-model="radio" label="2">不通过</el-radio>
      </template>
      <el-input style="margin-top: 20px" v-model="noReason" placeholder="请输入审核意见"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCheck = false">关 闭</el-button>
        <el-button type="primary" @click="makeCheck">确 定</el-button>
      </span>
    </el-dialog>
	</div>
</template>
<script>
  import { activity } from '../../../../config/proxy.js'
  import { mapState } from 'vuex'
  import mixins from '../../../../components/mixins.vue'
  // import { apiURL } from '../../config/settings.js'
  export default {
    mixins: [mixins],
    data () {
      return {
        all: [],
        formInline: {
          product_id: '',
          packageId: '',
          limit_branch_id: '',
          start_time: '',
          end_time: '',
          limit_department: '',
          limit_user_type: '',
          check_status: '',
          newbranchId: '',
          page: 1,
          pageSize: 10,
          product_type: '',
          promotion_id: '',
          promotion_name: '',
          promotion_type: 7,
          sortType: 2,
          orderBy: 2
        },
        huodongTime: '',
        total: '',
        branchList: [],
        tableData: [],
        isLoading: false,
        //      审核弹窗
        row: '',
        dialogCheck: false,
        radio: '1',
        noReason: '',
        button: false
      }
    },
    methods: {
      lotCheck () {
        if (this.all.length !== 0) {
          this.dialogCheck = true
        } else {
          this.$message({
            showClose: true,
            message: '请勾选您要批量审核的数据',
            type: 'warning'
          })
        }
      },
      handleChange (all) {
        this.all = all
      },
      handleSelectionChange (all) {
        this.all = all
      },
      isCheck (row, index) {
        return (row.state === '待审核' && row.isCheck === 'true') || (row.state === '审核中' && row.isCheck === 'true')
      },
      matchState (res) {
        if (res) {
          for (var i = 0; i < res.length; i++) {
            if (res[i].status === 1) { res[i].state = '草稿' }
            if (res[i].status === 2) { res[i].state = '待审核' }
            if (res[i].status === 3) { res[i].state = '审核中' }
            if (res[i].status === 4) { res[i].state = '审核不通过' }
            if (res[i].status === 5) { res[i].state = '未开始' }
            if (res[i].status === 6) { res[i].state = '进行中' }
            if (res[i].status === 7) { res[i].state = '已结束' }
            if (res[i].status === 99) { res[i].state = '已作废' }
            const str = res[i].gwId
            if (str.indexOf(this.roleId) !== -1 || str.indexOf(this.orId) !== -1) {
              res[i].isCheck = 'true'
            }
          }
        }
      }, // 映射
      timeChange (val) {
        if (val) {
          this.formInline.start_time = val[0]
          this.formInline.end_time = val[1]
        } else {
          this.formInline.start_time = ''
          this.formInline.end_time = ''
        }
      },          // 时间变化
      searchList () { // 查询
        this.isLoading = true
        let _data = this.formInline
        let count = Object.getOwnPropertyNames(this.formInline).length
        for (let key in _data) {
          if (_data[key] === null || !_data[key]) {
            delete _data[key]
          }
          count--
        }
        if (count === 1) {
          activity.sphd.list(_data, (res) => { // 查询
            console.log(_data, '查询的表单')
            console.log(res, '单品折扣分页数据')
            if (res.message === 'ok') {
              this.isLoading = false
              this.tableData = res.content.list
              this.matchState(this.tableData)
              this.total = res.content.count
//              this.page = res.content.page
            } else {
              this.isLoading = false
              this.message('查询失败', 'error')
            }
          })
        }
      },
      handleCurrentChange (val) {
        this.formInline.page = val
        this.searchList()
      }, // 分页
      handle (index, row, event) {     // 操作
        const handleName = event.target.innerText
        switch (handleName) {
          case '详情':
            this.openNewWindow('dpzk_detail', '单品折扣详情', 'dpzk_detail', row.id)
            break
          case '审核':
            this.row = row
            this.button = true
            this.noReason === ''
            this.dialogCheck = true
            break
        }
      },
      message (text, type) { // 消息提示
        this.$message({
          showClose: true,
          message: text,
          type: type
        })
      },
      makeCheck () {
        if (this.radio === '2' && this.noReason === '') {
          this.$message({
            showClose: true,
            message: '请您输入审核意见',
            type: 'warning'
          })
          return false
        }
        var checkArr = []
        if (!this.button) {
          console.log(this.all)
          this.all.forEach((item, index) => {
            const newItem = {
              tid: item.promotion_type,
              aid: item.id,
              gwId: item.gwId.indexOf(this.roleId) !== -1 ? this.roleId : this.orId
            }
            checkArr.push(newItem)
          })
        } else {
          const newItem = {
            tid: this.row.promotion_type,
            aid: this.row.id,
            gwId: this.row.gwId.indexOf(this.roleId) !== -1 ? this.roleId : this.orId
          }
          checkArr.push(newItem)
        }
        const _data = {
          branchId: this.branchId,
          newBranchId: this.bid,
          opinion: this.noReason,
          result: Number(this.radio),
          userId: this.userId,
          userName: this.userName,
          activityInfo: checkArr,
          flag: 1
        }
        activity.hdsh.yhqhdsh.check(_data, res => {
          this.dialogCheck = false
          if (res.message === 'ok') {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success'
            })
            this.searchList()
            this.$store.dispatch('dpzkState', this.$store.state.updateState.dpzkState + 1)
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      }
    },
    computed: mapState({
      userName: function (state) {
        return state.user.info.user_name
      },
      userId: function (state) {
        return state.user.info.user_id
      },
      orgName: function (state) {
        return state.user.info.parOrgName
      },
      orgId: function (state) {
        return state.user.info.or_org_id
      },
      roleId: function (state) {
        return Number(state.user.info.roleid)
      },
      orId: function (state) {
        return Number(state.user.info.or_id)
      },
      branchName: function (state) {
        return state.user.info.branchId === 1 ? '总公司' : state.user.info.branchName
      },
      branchId: function (state) {
        return state.user.info.branchId
      },
      bid: function (state) {
        return state.user.info.branchOrgId
      }
    }),
    watch: {
      update_state (curVal, oldVal) {  // 监听 更新状态 查询list
        this.searchList()
      }
    },
    created () {
      this.formInline.limit_branch_id = this.branchId // 分公司id
      this.formInline.newbranchId = this.bid  // 分公司id
      this.formInline.limit_department = '' // 部门id
    }
  }
</script>
<style>
.line{
	margin-left:20px;
	text-align:center
}
.el-button+.el-button{
  margin-left: 0
}
.el-table .cell, .el-table th>div{
  padding-left:10px;
  padding-right:10px;
}
.el-dialog--small{
  width:60%
}
</style>
